import React from 'react';
import Screen from '../Base/Screen';
import {Card, Col, Row,} from 'antd';
import Immutable from 'immutable'
import * as Img from '../../resources/index';
import Api from "../../configs/Api";
import CommonUtil from "../../utils/CommonUtil";

class Team extends Screen {
    constructor() {
        super();

        this.state = {
            data: Immutable.fromJS([]),
        }
    }

    async componentDidMount() {
        let req = await this.request(Api.USER_LIST, {
            page: 1, limit: 20,
        });
        if (req.status !== Api.SUCCESS_CODE) return CommonUtil.toast(req.msg);
        this.setState({data: Immutable.fromJS(req.data.rows)});
    }

    render() {
        return (
            <Card title={'团队成员'} bordered={false} style={{marginTop: '20px'}}>
                <ul className="team-list">
                    <Row>
                        {
                            this.state.data.map((item) => (
                                <Col key={item.get('id')} xs={{span: 12}} sm={{span: 8}} md={{span: 6}} lg={{span: 4}}>
                                    <li>
                                        <a href="javascript:;">
                                            <img src={item.get('avatar', '') || Api.DEFAULT_USER_PIC}/>
                                        </a>
                                        <p>{item.get('nickname', '') || item.get('account', '')}</p>
                                    </li>
                                </Col>
                            ))
                        }
                    </Row>
                </ul>

            </Card>
        )
    }
}

export default Team;
